<template>
	<view>
		<swiper :duration="200" :current="tabIndex" @change="onChangeTab" :style="'height:' + swiperHeight + 'px;'">
			<swiper-item>
				<scroll-view scroll-y scroll-with-animation :style="'height: '+ swiperHeight +'px;'">
					
					<block v-if="needList.length !== 0">
						<view class="font-lg flex justify-between align-center"
						:style="'height: '+ swiperViewHeight +'px;line-height: ' + swiperViewHeight +'px;'"
						 v-for="(item, index) in needList" @tap="openDetail()"
						 :key="index">
							<text class="ml-3">{{ item.sbName }}</text>
							<text>{{ item.sbSex }}</text>
							<text>{{ item.processName }}</text>
							<view class="mr-3" @tap="watchTask(needList, index)">
								<text class="px-3 py-1 rounded-circle bg-pink text-white font-md">查看</text>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="text-center" style="height: 500rpx; line-height: 500rpx;">
							<text class="font-lg text-danger">暂无数据</text>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y scroll-with-animation :style="'height: '+ swiperHeight +'px;'"
				 @scrolltolower="loadMoreTask">
					<block v-if="completeList.length !== 0">
						<view class="font-lg px-3 py-2 flex justify-between align-center"
						 v-for="(item, index) in completeList"
						 :key="index">
							<text class="ml-3">{{ item.sbName }}</text>
							<text>{{ item.sbSex }}</text>
							<text>{{ item.processName }}</text>
							<view class="mr-3" @tap="watchTask(completeList, index)">
								<text class="px-3 py-1 rounded-circle bg-pink text-white font-md">查看</text>
							</view>
						</view>
						<!-- <uni-load-more :status="completeLoadMoreStatus"></uni-load-more> -->
					</block>
					<block v-else>
						<view class="text-center" style="height: 500rpx; line-height: 500rpx;">
							<text class="font-lg text-danger">暂无数据</text>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue';
	
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				tabbars: ["待办任务", "已办任务"],
				tabIndex: 0, // 当前显示面板
				scrollInfo: "",
				swiperHeight: 0,
				swiperViewHeight: 0,
				statusBarHeight: 25,
				requestPageHaved: { // 已办分页
					page: 1,
					limit: 10
				},
				requestParameterHaved: { // 已办任务data
					"processKey": "",
					"processState": "",
					"processCurrNodeUserId": "",
					"userId": "",
					"processId": null,
					"departmentId": null,
					"username": null,
					"procApplyTime": null
				},
				// 待办任务列表
				needList: [{
					sbName: 'aa',
					sbSex: "aa",
					processName: "aa"
				}],
				completeLoadMoreStatus: 'more',
				// 已办任务列表
				completeList: [],
				flag: true
			}
		},
		computed: {
			isPagingHaved() {
				if (this.completeList.length%10 === 0) {
					return 'more';
				} else {
					return 'noMore';
				}
			}
		},
		onLoad(e) {
			let id = parseInt(e.id); // 判断管理员审核的申请项目
			this.changeTab(id);
			const res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
			this.swiperHeight = res.windowHeight - uni.upx2px(120)-40;
			this.swiperViewHeight = this.swiperHeight/10;
			this.getTaskList(id);
			this.completeLoadMoreStatus = this.isPagingHaved; 
		},
		methods: {
			changeTab (e) {
				this.scrollInfo = 'tab' + e;
				this.tabIndex = e;
			},
			onChangeTab (e) {
				const id = e.detail.current;
				if (id === 0) {
					this.needList = []
				} else {
					this.completeList = []
				}
				this.getTaskList(id)
				this.changeTab(id);
			},
			openDetail(e) {
				uni.navigateTo({
					url: './task-detail'
				})
			},
			loadMoreTask() {
				this.completeLoadMoreStatus = 'loading';
				this.getTaskList(1);
				this.completeLoadMoreStatus = this.isPagingHaved;
			},
			async getTaskList (id) {
				if (id === 0) {
					const requestParameter = {
						processKey: "",
						processState: "",
						processCurrNodeUserId: "",
						userId: "",
						processId: null,
						departmentId: null,
						username: null,
						procApplyTime: null
					}
					const res = await this.$api.getNoHandleList('/1/10', requestParameter);
					const content = res.data.result.content;
					for (let  i = 0 ; i < content.length ; i++) {
						this.needList.push(JSON.parse(content[i].procData));
					}
				} else {
					const res = await this.$api.getHandleList(`/${ this.requestPageHaved.page }/${this.requestPageHaved.limit}`, this.requestPageHaved);
					if (res.data.code === 200) {
						const content = res.data.result.content;
						for (let  i = 0 ; i < content.length ; i++) {
							this.completeList.push(JSON.parse(content[i].procData));
						}
					} else if (res.data.code === 203) {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none"
						});
					}
				}
			},
			watchTask (list, index) {
				uni.redirectTo({
				    url: './task-detail?data='+JSON.stringify(list[index])
				});
				// uni.navigateTo({
				// 	url: './task-detail?data='+JSON.stringify(list[index])
				// });
			},
			backLastPage () {
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
.tabbars {
	white-space: nowrap;
	width: 100%;
	border-bottom: solid #F5F5F4 1px;
}
.scroll-row {
	display: inline-block;
	padding: 0 30rpx 10rpx 30rpx;
}
.load-more {
	height: 188rpx;
	text-align: center;
	font-size: 30rpx;
	color: #BBBBBB;
	padding-top: 12rpx;
}
</style>